<!--
 * @Author: your name
 * @Date: 2021-08-11 23:19:41
 * @LastEditTime: 2021-08-23 23:17:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \element-ui-alaysis\src\components\button\src\button.vue
-->
<template>
    <button
        class="el-button"
        @click="handleClick"
        :disabled="buttonDisabled || loading"
        :autofocus="autofocus"
        :type="nativeType"
        :class="[type?'el-button--' + type : '',
            buttonSize ? 'el-button--' + buttonSize : '',
            {
                'is-disabled': buttonDisabled,
                'is-loading': loading,
                'is-plain': plain,
                'is-round': round,
                'is-circle': circle
            }]"
    >
        <!-- 加载进度动画 -->
        <i class="el-icon-loading" v-if="loading"></i>
        <!-- 按钮图标，在没有加载动画的时候显示 -->
        <i :class="icon" v-if="icon && !loading"></i>
        <!-- 这里负责显示按钮内容 -->
        <span v-if="$slots.default"><slot></slot></span>
    </button>
</template>

<script>
    export default {
        inject: {
            elForm: {
                default: ''
            },
            elFormItem: {
                default: ''
            }
        },
        props: {
            // 按钮类型
            type: {
                type: String,
                default: 'default'
            },
            // 按钮大小
            size: String,
            // 按钮图标
            icon: {
                type: String,
                default: ''
            },
            // 原生type属性 button/submit/reset
            nativeType: {
                type: String,
                default: 'button'
            },
            // 按钮是否禁用
            disabled: Boolean,
            // 圆角按钮
            round: Boolean,
            // 圆形按钮
            circle: Boolean,
            autofocus: Boolean,
            // 是否加载中状态
            loading: Boolean,
            // 是否朴素按钮
            plain: Boolean
        },
        methods: {
            handleClick(evt) {
                this.$emit('click', evt)
            }
        },
        computed: {
            _elFormItemSize() {
                console.log('elFormItemSize')
                return (this.elFormItem || {}).elFormItemSize; 
            },
            buttonSize() {
                // this.$ELEMENT是在全局设置组件大小的时候里面会有size值，
                // 全局完整引入Element并设置组件大小：Vue.use(Element, { size: 'small' })
                // 按需引入：Vue.prototype.$ELEMENT = { size: 'small' }
                return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
            },
            buttonDisabled() {
                console.log("buttonDisabled")
                return this.disabled || (this.elForm || {}).disabled;
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>